<template>
	<div>
		<!--新增按钮-->
		<div class="add_btn_wrap">
			<el-button @click="Add.dialogFormVisible = true;" type="primary" icon="document">新增站点人员</el-button>
		</div>
		<!-- 搜索 -->
		<div class="">
			<div class="down_search_wrap">
				<div class="search_btn_wrap" style="width: 150px;">
					<el-button @click="exportBtn" class="s_btn_up" style="width: 120px;display: block;margin-bottom: 6px;">导出</el-button>
					<el-button @click="searchBtn" type="primary" class="s_btn_down" style="width: 120px;display: block;margin: 0;">查询</el-button>
				</div>
				<div v-for="item in config.search.search_input" class="input_wrap">
					<label class="label" for="">{{item.placeholder}}：</label>
					<el-input :placeholder="'请输入'+item.placeholder" v-model="data.exchanged.search[item.name]" size="small" clearable>
					</el-input>
				</div>
				<div class="select_input_wrap" v-for="items in config.search.search_select">
					<label class="label" for="">{{items.placeholder}}：</label>
					<el-select v-model="data.exchanged.search[items.name]" :placeholder="items.placeholder" :multiple="items.multiple" :filterable="items.filterable" size="small" clearable>
						<el-option v-for="(item, index) in data.received.search[items.name]" :key="item.index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</div>
				<!-- 省市区 -->
				<div class="input_wrap">
					<label class="label" for="">地址：</label>
					<VDistpicker :province="data.exchanged.search.province" :city="data.exchanged.search.city" :area="data.exchanged.search.area" @province="onChangeProvince3" @city="onChangeCity3" @area="onChangeArea3">
					</VDistpicker>
				</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="">
			<el-table :data="data.received.table" stripe="stripe" :border='true' element-loading-text="拼命加载中" style="width: 100%">
				<!-- 表格主体 -->
				<template v-for="i in config.table.show.items.length">
					<el-table-column :sortable="config.table.sort[config.table.show.prop[i-1]]" :label="config.table.show.items[i-1]" :prop="config.table.show.prop[i-1]" :width="config.table.show.width[i-1]"></el-table-column>
				</template>
				<el-table-column label="操作" v-if="config.table.operate" :width="config.table.operate.width">
					<template slot-scope="scope">
						<el-button @click="modifyBtn(scope.row)" size="small">修改</el-button>
						<el-button @click="deleteBtn(scope.row)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页-->
		<div class="page_wrap">
			<page-model :data="data" :config="config.page" :dataCount="data.received.count" :limit="data.exchanged.search.limit" :currentPage="data.exchanged.search.page"></page-model>
		</div>
		<!-- 新增弹窗 -->
		<el-dialog :title="Add.config.title" :visible.sync="Add.dialogFormVisible" center width="500px">
			<el-form ref="addform" :model="Add.data.form" :rules="Add.config.rules" label-width="130px">
				<!--日期-->
				<el-form-item label="入职日期" prop="date">
					<el-date-picker v-model="Add.data.form.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-form-item>
				<!--户口所在地-->
				<el-form-item label="户口所在地" prop="province">
					<VDistpicker :province="Add.data.form.province" :city="Add.data.form.city" :area="Add.data.form.area" @province="onChangeProvince1" @city="onChangeCity1" @area="onChangeArea1">
					</VDistpicker>
				</el-form-item>
				<!--单选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.select">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.name" :value="option.id"></el-option>
					</el-select>
				</el-form-item>
				<!--多选下拉框类型-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.multipleSelect">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!-- 普通输入类型 -->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.input">
					<el-input v-model.trim="Add.data.form[item.prop]" class="h-40 w-200" :maxlength="255" :placeholder="item.placeholder"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="commitAdd('addform')" class="w-200">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑 -->
		<el-dialog :title="Edit.config.title" :visible.sync="Edit.dialogFormVisible" center width="500px">
			<el-form ref="form" :model="Edit.data.form" :rules="Edit.config.rules" label-width="130px">
				<!--日期-->
				<el-form-item label="入职日期" prop="date">
					<el-date-picker v-model="Edit.data.form.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-form-item>
				<!--户口所在地-->
				<el-form-item label="户口所在地" prop="province">
					<VDistpicker :province="Edit.data.form.province" :city="Edit.data.form.city" :area="Edit.data.form.area" @province="onChangeProvince2" @city="onChangeCity2" @area="onChangeArea2">
					</VDistpicker>
				</el-form-item>
				<!--单选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.select">
					<el-select v-model="Edit.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Edit.data.selectData[item.prop]" :label="option.name" :value="option.id"></el-option>
					</el-select>
				</el-form-item>
				<!--多选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.multipleSelect">
					<el-select v-model="Edit.data.form[item.prop]" :placeholder="item.placeholder" class="w-200" multiple>
						<el-option v-for="option in Edit.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!-- 普通输入类型 -->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.input">
					<el-input v-model.trim="Edit.data.form[item.prop]" :placeholder="item.placeholder" class="h-40 w-200" :maxlength="255"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Edit.dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="commitEdit()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	import pageModel from 'components/Common/page-model.vue'

	import VDistpicker from 'v-distpicker'

	export default {
		components: {
			pageModel,
			VDistpicker,
		},
		data() {
			return {
				sendCode: {
					dialogFormVisible: false,
					form: {
						name: 'slsl'
					}
				},
				Add: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							name: '',
							idcard: '',
							mobile: '',
							urgentName: '',
							urgentMobile: '',
							province: '',
							city: '',
							date: '',
							siteId: ''
						},
						selectData: {
							siteId: [],
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '新增站点工作人员',
						form: {
							input: [{
									prop: 'name',
									label: '姓名',
									placeholder: '请输入姓名',
								},
								{
									prop: 'idcard',
									label: '身份证号',
									placeholder: '请输入身份证号',
								},
								{
									prop: 'mobile',
									label: '电话号',
									placeholder: '请输入电话号',
								},
								{
									prop: 'urgentName',
									label: '紧急联系人',
									placeholder: '请输入紧急联系人',
								},
								{
									prop: 'urgentMobile',
									label: '紧急联系电话',
									placeholder: '请输入紧急联系电话',
								}
							],
							select: [{
								label: '站点',
								prop: 'siteId',
								placeholder: '请选择站点',
							}]
						},
						rules: {
							name: [{
								required: true,
								message: '请输入姓名'
							}, {
								min: 1,
								max: 30,
								message: '文字、字母1-30位'
							}],
							province: [{
								required: true,
								message: '请选择户口所在地省份'
							}],
							city: [{
								required: true,
								message: '请选择户口所在地城市'
							}],
							idcard: [{
								required: true,
								message: '请输入身份证号码'
							}],
							date: [{
								required: true,
								message: '请选择入职时间'
							}],
							siteId: [{
								required: true,
								message: '请选择站点'
							}],
							mobile: [{
								required: true,
								message: '请输入联系电话'
							}],
							urgentName: [{
								required: true,
								message: '请输入紧急联系人'
							}],
							urgentMobile: [{
								required: true,
								message: '请输入紧急联系人电话'
							}],
						}
					}
				},
				Edit: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							workerId: '',
							name: '',
							idcard: '',
							mobile: '',
							urgentName: '',
							urgentMobile: '',
							province: '',
							city: '',
							date: '',
							siteId: ''
						},
						selectData: {
							siteId: [],
						},

					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '修改站点工作人员',
						form: {
							input: [{
									prop: 'name',
									label: '姓名',
									placeholder: '请输入姓名',
								},
								{
									prop: 'idcard',
									label: '身份证号',
									placeholder: '请输入身份证号',
								},
								{
									prop: 'mobile',
									label: '电话号',
									placeholder: '请输入电话号',
								},
								{
									prop: 'urgentName',
									label: '紧急联系人',
									placeholder: '请输入紧急联系人',
								},
								{
									prop: 'urgentMobile',
									label: '紧急联系电话',
									placeholder: '请输入紧急联系电话',
								}
							],
							select: [{
								label: '站点',
								prop: 'siteId',
								placeholder: '请选择站点',
							}]
						},
						rules: {
							name: [{
								required: true,
								message: '请输入姓名'
							}, {
								min: 1,
								max: 30,
								message: '文字、字母1-30位'
							}],
							province: [{
								required: true,
								message: '请选择户口所在地省份'
							}],
							city: [{
								required: true,
								message: '请选择户口所在地城市'
							}],
							idcard: [{
								required: true,
								message: '请输入身份证号码'
							}],
							date: [{
								required: true,
								message: '请选择入职时间'
							}],
							siteId: [{
								required: true,
								message: '请选择站点'
							}],
							mobile: [{
								required: true,
								message: '请输入联系电话'
							}],
							urgentName: [{
								required: true,
								message: '请输入紧急联系人'
							}],
							urgentMobile: [{
								required: true,
								message: '请输入紧急联系人电话'
							}],
						}
					}
				},
				config: {
					baseApi: 'AdminApi/userList/List',
					search: {
						search_input: [{
							name: 'name',
							placeholder: '站点人员姓名',
							size: 'large'
						}],
						search_select: [{
							name: 'siteId',
							placeholder: '站点',
							size: 'large',
							multiple: false,
							filterable: true,
						}]
					},
					table: {
						sort: {
							date: true
						},
						show: {
							prop: [
								'siteName',
								'name',
								'provinceCity',
								'idcard',
								'mobile',
								'date',
								'urgentName'
							],
							items: [
								'站点',
								'站点人员姓名',
								'户口所在地',
								'身份证号',
								'联系电话',
								'入职日期',
								'紧急联系人',
							],
							width: []
						},
						operate: {}
					},
					page: {
						limits: [5, 10, 20, 50, 100],
						layout: 'total, sizes, prev, pager, next, jumper'
					},
				},
				data: {
					received: {
						table: [],
						count: 10,
						search: {}
					},
					exchanged: {
						search: {
							limit: 10,
							page: 1,
							province: '',
							city: '',
							area: '',
							siteId: '',
							name: '',
						},
						multipleSelection: [],
						isDelete: 0,
						date: {
							time: '',
						}
					}
				}
			}
		},
		created() {
			this.tableData();
			//获取下拉框数据
			this.selectData();
			
			// 延迟绑定监听
			this.$watch('data.exchanged.search.limit', {
				deep: true,
				handler: function() {
					this.tableData()
				}
			})
			this.$watch('data.exchanged.search.page', {
				deep: true,
				handler: function() {
					_g.openGlobalLoading()
					this.tableData()
				}
			})
		},
		methods: {
			tableData() {
				let obj = this.data.exchanged.search;
				let page = obj.page - 1;
				this.apiGet("/api/backend/base/site-worker/list?page=" + page + "&count=" + obj.limit + "&province=" +
						obj.province + "&city=" + obj.city + "&area=" + obj.area + "&siteId=" +
						obj.siteId + "&name=" + obj.name)
					.then(res => {
						res.data.workers.map(i => {
							i.provinceCity = i.province + i.city
						})
						this.data.received.table = res.data.workers
						this.data.received.count = res.data.count
						_g.closeGlobalLoading();
					})
			},
			commitAdd(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						let that = this;
						//站点字典
						that.apiPost("/api/backend/base/site-worker/add", this.Add.data.form).then(res => {
							if(res.code == 200) {
								this.Add.dialogFormVisible = false;
								this.tableData();
							}
						})
					}
				});
			},
			modifyBtn(row) {
				this.Edit.data.form.workerId = row.workerId;
				this.Edit.data.form.name = row.name;
				this.Edit.data.form.province = row.province;
				this.Edit.data.form.city = row.city;
				this.Edit.data.form.idcard = row.idcard;
				this.Edit.data.form.mobile = row.mobile;
				this.Edit.data.form.urgentName = row.urgentName;
				this.Edit.data.form.urgentMobile = row.urgentMobile;
				this.Edit.data.form.date = row.date;
				this.Edit.data.form.siteId = row.siteId;

				this.Edit.dialogFormVisible = true;
			},
			commitEdit() {
				this.apiPost("/api/backend/base/site-worker/modify", this.Edit.data.form).then(res => {
					console.log('修改res', res)
					if(res.code == 200) {
						this.$message({
							type: 'success',
							message: '修改成功！'
						});
						this.Edit.dialogFormVisible = false;
						this.tableData();
					}
				})
			},
			deleteBtn(row) {
				let that = this;
				that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.apiPost("/api/backend/base/site-worker/remove", {
						workerId: row.workerId
					}).then(res => {
						if(res.code == 200) {
							that.tableData()
						}
					})
				}).catch(() => {

				});
			},
			//导出按钮
			exportBtn() {
				let obj = this.data.exchanged.search;
				window.location.href = axios.defaults.baseURL+"/api/backend/base/site-worker/export?province=" +
					obj.province + "&city=" + obj.city + "&area=" + obj.area + "&siteId=" +
					obj.siteId + "&name=" + obj.name;
			},
			searchBtn() {
				this.tableData();
			},

			//获取下拉框数据
			selectData() {
				let that = this;
				//站点字典
				this.apiGet("/api/dict/site/list", null).then(res => {
					if(res.code == 200) {
						that.data.received.search.siteId = res.data.sites
						that.Add.data.selectData.siteId = res.data.sites
						that.Edit.data.selectData.siteId = res.data.sites
					}
				})
			},
			onChangeProvince1(data) {
				this.Add.data.form.province = data.value;
			},
			onChangeCity1(data) {
				this.Add.data.form.city = data.value;
			},
			onChangeArea1(data) {
				this.Add.data.form.area = data.value;
			},
			onChangeProvince2(data) {
				this.Edit.data.form.province = data.value;
			},
			onChangeCity2(data) {
				this.Edit.data.form.city = data.value;
			},
			onChangeArea2(data) {
				this.Edit.data.form.area = data.value;
			},
			onChangeProvince3(data) {
				if(data.value == '省') {
					this.data.exchanged.search.province = ''
				} else {
					this.data.exchanged.search.province = data.value;
				}
			},
			onChangeCity3(data) {
				this.data.exchanged.search.city = data.value;
			},
			onChangeArea3(data) {
				this.data.exchanged.search.area = data.value;
			}
		},

		mixins: [http]
	}
</script>
<style scoped>
	.add_btn_wrap {
		background: rgba(250, 250, 250, 1);
		padding: 10px 30px;
		text-align: right;
	}
	
	.page_wrap {
		text-align: center;
		padding: 30px;
	}
</style>
<style type="text/css">
	.el-message-box__header {
		background: rgba(24, 144, 255, 1);
	}
	
	.el-message-box__title {
		color: #fff;
	}
	
	.el-message-box__headerbtn .el-message-box__close {
		color: #fff;
	}
	
	.distpicker-address-wrapper {
		line-height: 46px;
		display: inline-block;
	}
	
	.distpicker-address-wrapper select {
		padding: 0;
		height: 32px;
		font-size: 14px;
		line-height: 1;
	}
</style>